<!--
  Generated template for the HomePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>

    <div class="input-bar" (click)="openGoodsList()" [style.background]="'rgba(255,255,255,'+(1-headerOpacity/2)+')'">
      <ion-icon name="search" [style.color]="'rgb('+headerOpacity*255+','+headerOpacity*255+','+headerOpacity*255+')'"></ion-icon>
      <span [style.color]="'rgb('+(headerOpacity*55+200)+','+(headerOpacity*55+200)+','+(headerOpacity*55+200)+')'">请输入你想搜索的 商品 / 品牌</span>
      <ion-icon class="message" (click)="openMessage($event)" name="ios-chatbubbles"></ion-icon>
    </div>
  </ion-navbar>
</ion-header>
<ion-content [class.refreshing]="refreshing">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="md-arrow-down" pullingText="下拉刷新..." refreshingSpinner="ios" refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>
  <ion-slides autoplay pager control='true' loop="true" style="height: auto;min-height: 100px;">
    <ion-slide *ngFor="let image of bannerList">
      <image [src]="image.adv_image" (click)="goAdv(image.adv_url)"></image>
    </ion-slide>
  </ion-slides>
  <!-- 功能 -->
  <div class="function">
    <ion-grid>
      <ion-row>
        <ion-col col-3 (click)="myOrder()">
          <img src="assets/imgs/order.png" alt="">
          <p>订单</p>
        </ion-col>
        <ion-col col-3 (click)="myFav()">
          <img src="assets/imgs/fav.png" alt="">
          <p>收藏</p>
        </ion-col>
        <ion-col col-3 (click)="cameraOrder()">
          <img src="assets/imgs/camera.png" alt="">
          <p>拍照下单</p>
        </ion-col>
        <ion-col col-3 (click)="machining()">
          <img src="assets/imgs/glasses.png" alt="">
          <p>充值余额</p>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <section class="interval"></section>
  <!-- 优惠券 -->
  <div class="coupon_list" *ngIf="couponList.length>0">
    <ion-scroll scrollX="true" style="height:90px;">
      <ul class=" clear">
        <li *ngFor="let coupon of couponList" (click)="bindCoupon(coupon)">
          <div>
            <div class="price">
              ¥
              <span>{{coupon.money}}</span>
              <p>优惠券</p>
            </div>
            <div class="get">
              <span *ngIf="coupon.at_least != '0.00'">满{{coupon.at_least}}使用</span>
              <span *ngIf="coupon.at_least == '0.00'">无门槛使用</span>
              <p>立即领取</p>
            </div>
          </div>
        </li>
      </ul>
    </ion-scroll>
  </div>
  <section class="interval" *ngIf="couponList.length>0"></section>
  <!-- 促销资讯 -->
  <div class="index-trumpet" (click)="article()">
    <div class="title">
      <img src="assets/imgs/123.png" alt="">
    </div>
    <div class="roll-box">
      <ul>
        <li>
          <span class="label">
            新资讯
          </span>
          <span class="value">
            新版APP正式上线
          </span>
          <span class="more">
            更多
          </span>
        </li>
        <li>
          <span class="label">
            新资讯
          </span>
          <span class="value">
            新版APP正式上线
          </span>
          <span class="more">
            更多
          </span>
        </li>
        <li>
          <span class="label">
            促销
          </span>
          <span class="value">
            超多新活动
          </span>
          <span class="more">
            更多
          </span>
        </li>
      </ul>
    </div>
  </div>
  <section class="interval"></section>

  <!-- 促销倒计时 -->
  <div class="promotion" *ngIf="promoList.length>0">
    <img src="assets/imgs/mao_title.jpg" alt="">
    <div>
      <span class="time">
        {{promoHour}}
      </span>
      时
      <span class="time">
        {{promoMin}}
      </span>
      分
      <span class="second">
        {{promoSec}}
      </span>
      秒
    </div>
    <ion-scroll scrollX="true" style="height:135px;">
      <ul [style.width]="100*promoList.length + 'px'" class="promo-list clear">
        <li *ngFor="let promo of promoList" (click)="openGoodsDetail(promo.goods_id)">
          <span>{{promo.discount}}折</span>
          <image [src]="promo.picture.pic_cover_mid" alt=""></image>
          <p>{{promo.goods_name}}</p>
          <div>¥ {{promo.promotion_price}}</div>
        </li>
      </ul>
    </ion-scroll>


  </div>
  <section class="interval" *ngIf="promoList.length>0"></section>
  <!-- 精品汇 -->
  <div class="special">
    <img src="assets/imgs/weipinhui.jpg" alt="">
    <image class="maxh" *ngIf="index_adv_one" [src]="index_adv_one" alt=""></image>
    <div class="special-box">
      <ion-grid>
        <ion-row>
          <ion-col *ngIf='recommendList[0]' col-6 class="br" tappable (click)="openGoodsDetail(recommendList[0].goods_id)">
            <p class="title">{{recommendList[0].goods_name}}</p>
            <p class="price">¥ {{recommendList[0].promotion_price}}</p>
            <image [src]="recommendList[0].pic_cover_mid" alt=""></image>
          </ion-col>
          <ion-col col-6 class="pd0">
            <ion-grid style="height:100%">
              <ion-row style="height: 50%;" *ngIf='recommendList[1]' class="bb" tappable (click)="openGoodsDetail(recommendList[1].goods_id)">
                <ion-col col-6>
                  <image [src]="recommendList[1].pic_cover_mid" alt=""></image>
                </ion-col>
                <ion-col col-6>
                  <p>{{recommendList[1].goods_name}}</p>
                  <p class="price">{{recommendList[1].promotion_price}}</p>
                </ion-col>
              </ion-row>
              <ion-row style="height: 50%;" *ngIf='recommendList[2]' tappable (click)="openGoodsDetail(recommendList[2].goods_id)">
                <ion-col col-6>
                  <image [src]="recommendList[2].pic_cover_mid" alt=""></image>
                </ion-col>
                <ion-col col-6>
                  <p>{{recommendList[2].goods_name}}</p>
                  <p class="price">{{recommendList[1].promotion_price}}</p>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
        </ion-row>

      </ion-grid>
    </div>
  </div>
  <section class="interval"></section>
  <!-- 热门汇 -->
  <div class="hot">
    <img src="assets/imgs/remenhui.jpg" alt="">
    <image class="maxh" *ngIf="index_adv_two" [src]="index_adv_two" alt=""></image>
    <ion-grid>
      <ion-row>
        <ion-col col-4 *ngFor="let item of hotList1" tappable (click)="openGoodsDetail(item.goods_id)">
          <image [src]="item.pic_cover_mid" alt=""></image>
          <p>{{item.goods_name}}</p>
          <p class="price">¥ {{item.promotion_price}}</p>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-4 *ngFor="let item of hotList2" tappable (click)="openGoodsDetail(item.goods_id)">
          <image [src]="item.pic_cover_mid" alt=""></image>
          <p>{{item.goods_name}}</p>
          <p class="price">¥ {{item.promotion_price}}</p>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-4 *ngFor="let item of hotList3" tappable (click)="openGoodsDetail(item.goods_id)">
          <image [src]="item.pic_cover_mid" alt=""></image>
          <p>{{item.goods_name}}</p>
          <p class="price">¥ {{item.promotion_price}}</p>
        </ion-col>
      </ion-row>

    </ion-grid>
  </div>
  <section class="interval"></section>
  <img src="assets/imgs/biaoti.jpg" alt="">
  <div class="more_goods">
    <div class="goods_item" *ngFor="let item of goodsList" tappable (click)="openGoodsDetail(item.goods_id)">
      <image [src]="item.pic_cover_mid" alt=""></image>
      <p class="name">{{item.goods_name}}</p>
      <p class="price">
        <span>¥ {{item.promotion_price}}</span>
        <span>{{item.market_price}}</span>
      </p>
    </div>
  </div>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>


  <div class="notice" [class.hide]="!index_adv_three?.adv_url">
    <div class="content">
      <image [src]="index_adv_three?.adv_image" alt="" (click)="goAdv(index_adv_three?.adv_url)"></image>
      <ion-icon name="ios-close-circle" (click)="index_adv_three = ''"></ion-icon>
    </div>
  </div>
</ion-content>
